<template>
  <basic-container page-title="操作日志" custom-content>
    <template #filter>
      <div
        :class="loading && 'pointer-events-none'"
        class="filter flex justify-between items-center"
      >
        <div class="filter-left flex items-center gap-x-4">
          <el-form inline>
            <el-form-item label="操作类型">
              <el-select v-model="queryParams.type" class="w-[177px]">
                <el-option
                  v-for="item in LogActionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="快捷选择">
              <el-radio-group v-model="activeDay" class="basic-day-radio-group">
                <el-radio border :label="-1">昨天</el-radio>
                <el-radio border :label="0">今天</el-radio>
                <el-radio border :label="-15">15天</el-radio>
                <el-radio border :label="-30">30天</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="自定义日期">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                class="w-[375px]"
                start-placeholder="起始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD HH:mm:ss"
                range-separator="至"
                @change="onDateRangeChange"
              ></el-date-picker>
            </el-form-item>
            <el-form-item class="m-0">
              <BasicRefreshBtn :loading="loading" @click="getList()" />
            </el-form-item>
          </el-form>
        </div>
        <!-- <div class="filter-right"></div> -->
      </div>
    </template>

    <el-table
      v-loading="loading"
      :data="tableData"
      class="basic-table"
      :tooltip-options="{ popperClass: 'basic-tooltip' }"
      height="100%"
    >
      <template #empty><TableEmpty /></template>
      <el-table-column
        type="index"
        label="序号"
        width="80"
        fixed="left"
      ></el-table-column>
      <el-table-column label="操作时间" width="220">
        <template #default="{ row }">
          <span v-format-unix="row.created_at"></span>
        </template>
      </el-table-column>
      <el-table-column label="操作用户" width="150" show-overflow-tooltip>
        <template #default="{ row }">
          <span v-format-table-cell="row.username"></span>
        </template>
      </el-table-column>
      <el-table-column label="操作类型" width="150" show-overflow-tooltip>
        <template #default="{ row }">
          <span>{{ getOptionsLabel(LogActionOptions, row.type) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作内容" min-width="200" show-overflow-tooltip>
        <template #default="{ row }">
          <span class="whitespace-pre" v-html="emptyText(row.content)"></span>
        </template>
      </el-table-column>
      <el-table-column label="IP" width="200">
        <template #default="{ row }">
          <span v-format-table-cell="row.ip"></span>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <basic-pagination
        :pagination="pagination"
        @change="getList()"
      ></basic-pagination>
    </template>
  </basic-container>
</template>

<script setup lang="ts">
import type { CommonParams } from '@/apis/model/_utils'
import { BasicContainer } from '@/components/application'
import { LogActionOptions } from '@/config/enums/log'
import useDateRange from '@/hooks/useDateRange'
import { useListRequest } from '@/hooks/useListRequest'
import { getOptionsLabel } from '@/utils'

type IQuery = Required<
  Pick<CommonParams<'/v1/operation_log', 'get'>, 'begin_at' | 'end_at'>
> & { type: string }

const queryParams = reactive<IQuery>({
  type: '0',
  begin_at: '',
  end_at: ''
})

/**
 * 列表数据
 */
const {
  data: tableData,
  getList,
  pagination,
  loading
} = useListRequest(logListApi, queryParams)

watch(queryParams, handleSearch)

function handleSearch() {
  pagination.page = 1
  getList()
}

const { activeDay, dateRange, onDateRangeChange } = useDateRange(queryParams)
</script>

<style scoped lang="scss">
:deep(.el-form-item) {
  @apply mb-0;
}
</style>
